<template>
  <div class="header_title">
    <div class="header_title_p">
      <span style="30%">
        <img src="/img/hleft.png" style="width:100%" />
      </span>

      <span class="pmzd-font htitle" style="min-width:23%">智慧用电安全监管服务管理平台</span>
      <span style="30%">
        <img src="/img/hright.png" style="width:100%"/>
      </span>
      <span class="loginout pmzd-font" @click="hd_zhuxiao">注销</span>
    </div>

    <!-- <p class="header_p pmzd-font">融厚（天津）网络科技有限公司</p>
    <span class="header_span pmzd-font">Rong Hou Ke Ji Contemy</span>
    <div class="h_button1">
      <span style="margin-right:10px;color:#333" class="pmzd-font">欢迎您，{{username}}</span>
      <el-button  @click="hd_zhuxiao" class="pmzd-font">注销</el-button>
    </div>-->
    <audio controls="controls" ref="mySummaryAudio" preload="auto" loop hidden="true">
      <source src="../static/audio/1.mp3" />
    </audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: sessionStorage.getItem('username'),
      warningtype: '',
      warningvalue: '',
      warningtext: '',
      warningname: ''
    }
  },
  mounted() {
    var socket
    if (typeof WebSocket == 'undefined') {
      console.log('您的浏览器不支持WebSocket')
    } else {
      console.log('您的浏览器支持WebSocket')
      //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
      //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");

      var sid = 'htmlclient'
      var nowtime = new Date().getTime()
      sid += nowtime
      socket = new WebSocket('ws://172.16.21.252:8095/websocket/' + sid)
      //	socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));192.168.1.114
      //打开事件
      socket.onopen = function() {
        console.log('Socket 已打开')
        //socket.send("这是来自客户端的消息" + location.href + new Date());
      }
      //获得消息事件
      socket.onmessage = msg => {
        console.log('1111', msg.data)
        if (msg.data != '' && msg.data != '连接成功') {
          this.warningtype = JSON.parse(msg.data).type
          this.warningtext = JSON.parse(msg.data).reason
          this.warningvalue = JSON.parse(msg.data).value
          this.warningmeasure = JSON.parse(msg.data).measure
          this.warningname = JSON.parse(msg.data).device_name
          setTimeout(() => {
            this.$refs.mySummaryAudio.play()
          }, 500)

          this.$notify({
            title: this.warningtype,
            type: 'warning',
            message:
              '报警设备：' +
              this.warningname +
              '，报警原因：' +
              this.warningtext +
              '，当前值：' +
              this.warningvalue +
              this.warningmeasure,
            duration: 0,
            onClick: () => {
              this.$router.push({
                name: 'index-SystemHome',
                query: {
                  type: '1',
                  device_id: JSON.parse(msg.data).device_id,
                  region_id: JSON.parse(msg.data).region_id
                }
              })
            },
            onClose: () => {
              this.$refs.mySummaryAudio.pause()
            }
          })
        }

        //发现消息进入    开始处理前端触发逻辑
      }
      //关闭事件
      socket.onclose = function() {
        console.log('Socket已关闭')
      }
      //发生了错误事件
      socket.onerror = function() {
        alert('Socket发生了错误')
        //此时可以尝试刷新页面
      }
    }
  },
  methods: {
    backlast() {
      this.$router.push(go(-1))
    },
    hd_zhuxiao() {
      this.$confirm('此操作将注销您的账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          sessionStorage.removeItem('token')
          sessionStorage.removeItem('username')
          this.$router.push('/login')
          this.$message({
            type: 'success',
            message: '注销成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style>
.htitle {
  font-size: 28px;
  letter-spacing: 4px;
  color: #23ffff;
  text-align: center;
 
}
.header_title_p {
  display: flex;
   padding: 28px 0;
  justify-content: space-around;
  align-items: center;
}
.loginout {
  color: #23ffff;
  font-size: 20px;
  position: absolute;
  right: 4%;
  cursor: pointer;
}
.loginout:hover{
  color: #fff
}
.header_title {
  text-align: left;
  /* line-height: 30px; */
  /* padding: 30px 20px; */
  /* background: #fff; */
  /* margin: 0;
  border: none;
  color: #414141;
  position: fixed;
  width: 100%;
  z-index: 11; */
  /* box-shadow: 2px 1px 8px #ccc; */
}
.header_p {
  font-size: 18px;
  font-weight: bold;
  color: #181d20;
  height: 55px;
  line-height: 55px;
}
.header_span {
  font-size: 12px;
  height: 20px;
  display: block;
  line-height: 5px;
  color: #aaa;
}
.h_button1 {
  float: right;
  margin-right: 14%;
  font-size: 15px;
  display: inline-block;
  margin-top: -60px;
}
</style>
